 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> Login catha</title>
</head>
<body>
<div class="row" style="margin-top: 50px">
  <div class="col-md-6 col-md-offset-3">
    <form id="myform">
      {% csrf_token %}
      {% for form in form_obj %}
        <div class="form-group">
          <label for="">{{ form.label }}</label>
          {{ form }}					{#  直接渲染出验证码图片和验证码输入框 #}
        </div>
      {% endfor %}
    </form>
    <button id="btn_submit">提交</button>
  </div>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $('.captcha').click(function () {
    $.getJSON("/captcha/refresh/", function (result) {
      $('.captcha').attr('src', result['image_url']);
      $('#id_captcha_0').val(result['key'])
    });
  });

  {# 点击提交按钮，ajax提交数据  #}
  $('#btn_submit').click(function () {
    $.ajax({
      url: '/login2/',
      type: 'post',
      data: {
        'csrfmiddlewaretoken': '{{ csrf_token }}',
        'username': $('#id_username').val(),
        'password': $('#id_password').val(),
        'captcha_1': $('#id_captcha_1').val(),
        'captcha_0': $('#id_captcha_0').val(),
      },
      success: function (args) {
      }
    })
  })
</script>

</html>
